<template>
  <div v-loading="loading">
    <el-radio-group v-model="chip_type">
      <el-radio-button label="in">{{ $t("transIn") }}</el-radio-button>
      <el-radio-button label="out">{{ $t("transOut") }}</el-radio-button>
    </el-radio-group>
    <div class="recharge" style="margin-top: 20px">
      <div class="game-type">
        <div class="ib-r">
          <el-select
            v-model="game"
            @change="selectGame"
            :placeholder="$t('selectGame')"
          >
            <el-option
              v-for="item in gameList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="chip-amount">
        <el-input v-model="activeGame.chip_amount" readonly>
          <template v-slot:prepend>
            <img :src="activeGame.chip_small_icon" alt="" />
          </template>
        </el-input>
      </div>
    </div>
    <div class="recharge">
      <div class="input-box">
        <el-input id="inputxx" v-model="value"> </el-input>
      </div>
    </div>
    <div class="icon-box" v-if="activeGame.is_exchange">
      1USD =
      {{ 1 * activeGame.diamond_chip_ratio ? activeGame.diamond_chip_ratio : 1
      }}<img
        src="@/assets/img/gold.png"
        alt=""
        style="width: 20px; height: 20px"
      />
    </div>
    <div class="exchangeBtn">
      <el-button type="primary" @click="exchange">{{
        $t("exchange")
      }}</el-button>
    </div>
  </div>
</template>
<script>
import {
  //   httpGameList,
  httpTransferChip,
  httpInfo,
  httpExchangeGames,
} from "@/http/api";
import { formatMoney } from "@/utils/common";
export default {
  name: "exchange",
  data() {
    return {
      chip_type: "in",
      activeGame: {},
      gameList: [],
      value: "",
      game: "",
      loading: false,
    };
  },
  created() {
    this.getHttpInfo();
    // this.getHttpGameList();
    this.getExchangeGames();
  },
  methods: {
    formatMoney,
    async getHttpInfo() {
      let res = await httpInfo();
      if (res.code == 0) {
        this.assets_total = res.data?.diamond || 0;
        this.assets_available = res.data?.diamond || 0;
        this.assets_freeze = res.data?.diamond || 0;
        this.diamond_icon = res.data?.diamond_icon || "";
      }
    },
    update(value) {
      // document.getElementById("inputxx").focus();
      if (value == -1) {
        if (this.value == "0.00") {
          this.value = "";
          //this.$refs.InputNumber.disabled = true
        } else {
          this.value = this.value.substring(0, this.value.length - 1);
          // if (this.value) this.$refs.InputNumber.disabled = false
          // else this.$refs.InputNumber.disabled = true
        }
      } else {
        if (this.value == "0.00") {
          this.value = "";
          //this.$refs.InputNumber.disabled = true
        }
        if (!this.value && value == ".") return;
        this.value += value;
        this.value = this.value.toString().match(/^\d+(?:\.\d{0,2})?/)[0];

        // this.$refs.InputNumber.disabled = false
      }
    },
    query() {
      if (!this.value.trim() || Number(this.value) == 0) return;
      // return this.$toast("Please enter the amount");
      if (Number(this.value) > this.assets_available) {
        return this.$toast("Insufficient Balance");
      }
      this.queryShow = true;
    },
    // 获取兑换游戏列表
    async getExchangeGames() {
      this.loading = true;
      let res = await httpExchangeGames({ page: 1 });
      this.loading = false;
      if (res.code == 0) {
        this.gameList = res.data.list || [];
        if (this.gameList.length) {
          this.activeGame = this.gameList[0];
          this.game = this.gameList[0].id;
        }
        // this.chip_amount = res.data?.list[0]?.chip_amount || 0;
        // this.game_id = res.data?.list[0]?.id || 0;
        this.exchange_tip = res.data?.exchange_tip.replace(/\n/g, "<br/>");
        // this.game_id = res.data?.list[0]?.id || 0;
        this.activity_msg = res.data?.activity_msg.replace(/\n/g, "<br/>");
        console.log(this.chip_amount);
      }
    },
    searchGame() {
      if (this.searchValue.trim()) {
        this.gameList = this.oldGameList.filter((v) => {
          return v.name.indexOf(this.searchValue) > -1;
        });
      }
    },
    searchValueChange() {
      if (!this.searchValue.trim()) {
        this.gameList = this.oldGameList;
      }
    },
    selectGame(v) {
      this.activeGame = this.gameList.find((item) => {
        return item.id === v;
      });
      this.game = v;
    },
    async exchange() {
      console.log(this.activeGame.id);
      let params = {
        chip: Number(this.value),
        // game_id: this.activeGame.id,
        // 默认2
        game_id: this.activeGame.id,
        chip_type: this.chip_type,
      };
      let res = await httpTransferChip(params);
      if (res.code == 0) {
        this.$message.success("success");
        this.queryShow = false;
        this.getHttpInfo();
        this.getExchangeGames();
        this.$emit("child-event");
      } else {
        this.$message.error(res.message);
        this.queryShow = false;
        this.getHttpInfo();
        this.getExchangeGames();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.recharge {
  width: 80%;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.game-type {
  padding: 20px 0;
  text-align: center;
  font-size: 36px;
  border-radius: 20px;
}
.ib-r {
  display: flex;
  align-items: center;
  .el-select {
    width: 100%;
  }
}
.ib-r-img {
  flex: 1;
  display: flex;
  align-items: center;
}
.ib-r-img img {
  width: 80px;
  height: 80px;
  margin-right: 50px;
}
.xiala {
  width: 48px;
  height: 48px;
  //   background: url("~@/assets/img/select-right.png") center/48px 48px;
}
.chip-amount {
  display: flex;
  padding: 0 0 20px 0;
  border-radius: 20px;
  //   background-color: rgba(0, 0, 0, 0.1);
  justify-content: space-between;
}
.chip-amount img {
  width: 20px;
  height: 20px;
}
.input-box {
  width: 100%;
}
.input-box input {
  width: 100%;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.1);
}

.diamond {
  width: 682px;
  margin: 10px auto;
  display: flex;
  padding: 10px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  justify-content: space-between;
  align-items: center;
}
.diamond img {
  width: 40px;
  height: 40px;
}
.icon-box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: start;
}
.hbox-head {
  margin-bottom: 10px !important;
}

.tips {
  color: #fff;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .red {
    color: red !important;
  }

  .chip_amount {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      margin: -8px;
      padding: 0 1px;
    }

    .icon {
      width: 38px;
      height: 38px;
      background: url(https://img.js.design/assets/img/627d1942fe1aaf11ac9f3085.png)
        center/38px 38px;
      flex-shrink: 0;
    }
  }
}

.hbox-tips {
  .icon-box {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      margin: -8px;
      padding: 0 1px;
    }
  }

  .diamond-icon {
    width: 30px;
    height: 30px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .gold-icon {
    width: 38px;
    height: 38px;
    background: url(https://img.js.design/assets/img/627d1942fe1aaf11ac9f3085.png)
      center/38px 38px;
    flex-shrink: 0;
  }
}
.exchangeBtn {
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  .el-button {
    width: 120px;
  }
}
</style>
